<template>
	<div class="view">
		<Form ref="form" 
			:model="data.params" 
			:rules="ruleValidate" 
			:label-width="100">
			
			<FormItem 
				label="新密码：" 
				prop="pwd">
				<Input type="password" 
					v-model="data.params.pwd" 
					placeholder="请输入新密码" 
					size="large" 
					style="width:280px;">
				</Input>
			</FormItem>
			
			<Form-item 
				label="确认密码：" 
				prop="submitPwd">
				<Input type="password" 
					v-model="data.params.submitPwd" 
					placeholder="请输入密码" 
					size="large" 
					style="width:280px;">
				</Input>
			</Form-item>
			
			<Form-item>
				<Button type="primary" 
					long 
					@click="click2Submit" 
					size="large" 
					style="width:280px;">
					确认
				</Button>
			</Form-item>
			
		</Form>
	</div>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				ruleValidate: {
					//var reg = /^[a-zA-Z0-9]{5,17}$/;
					pwd: [{
						required: true,
						message: '新密码不能为空',
						trigger: 'blur'
					}],
					submitPwd: [{
						required: true,
						message: '确认密码不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			click2GetVCode() {
				this.$emit('on-action', 'get-vcode', this.data)
			},
			click2Submit() {
				var $this = this;
				this.$refs['form'].validate((valid) => {
					if (valid) {
                    		$this.$emit('on-action', 'submit', this.data)
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
				})
			}
		},
		mounted: function() {
		}
	}
</script>

<style scoped="scoped">
.view {
	background-color: #fff;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>